<template>
	<view class="page-container">
		
		<view class="top">
			<view class="top_text top_title">本周应急预案资金池</view>
			<view class="top_text top_amount">￥{{total_amount}}</view>
		</view>
		
		<view class="top_text" v-if="list.length!=0">机构出资TOP10榜单</view>
		
		<view class="top" :class="{'hidden': !item.visible && !showAll}" v-for="(item,index) in list" style="height:120rpx;display: flex;padding-top:20rpx ; margin-top: 15rpx;  padding-bottom: 20rpx;">
			<view class="top_left">
				<block v-if="index==0"><image :src="one_img" style="width:70rpx;height: 70rpx;margin: auto;margin-top: 20rpx;"></image></block>
				<block v-if="index==1"><span style="color: #ADADAD; font-size: 56rpx;font-weight: bold;">{{index+1}}</span></block>
				<block v-if="index==2"><span style="color: #DFAE50; font-size: 56rpx;font-weight: bold;">{{index+1}}</span></block>
				<block v-if="index>2">{{index+1}}</block>
			</view>
			<view class="top_center">
				<view style="font-size: 16px;">{{item.title}}</view>
				<view style="font-size: 16px;">￥{{item.total_amount}}</view>
			</view>
			<view class="top_right" @click="chakan(item)">查看详情</view>
		</view>
		
		<view @click="toggleShowAll" style="width: 100%;text-align: center; padding-top: 10rpx;padding-bottom: 10rpx;color: #ADADAD;">
			<span v-if="showAll==false">点击展开全部</span>
			<span v-if="showAll!=false">收起</span>
		</view>

		<view v-if="showCustomPopup" class="custom-popup">
			<view @click="showCustomPopup = false" style="float: right; padding: 10rpx;font-size: 32rpx;color: #888;">X</view>
			<view style="clear: both;"></view>
			<view class="custom-popup-content">			
				<view class="top_text top_title" style="font-size: 36rpx;">{{find.title}}</view>
				<view class="top_text top_title" style="font-size: 30rpx;">本周资金：{{find.total_amount}}元</view>
				<view class="top_text top_title" style="font-size: 30rpx;color: #888; padding:30rpx; text-align: left;">过桥要求：{{find.remark}}</view>
				<view class="btn" @click="kefu"> 立即咨询 </view>
			</view>
		</view>
		<view class="zhezhao" v-if="showCustomPopup"></view>
		
		
		<image src="/static/poster.jpg" mode="widthFix" style="width: 100%;"></image>
		<image src="/static/poster1.jpg" mode="widthFix" style="width: 100%;"></image>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				total_amount:0,
				baseUrl:getApp().globalData.url,
				list:[],
				one_img:getApp().globalData.url+'web_config/one.png',
				showAll: false,
				showCustomPopup:false,
				find:{}
			}
		},
		onLoad() {
			this.index()
		},
		methods: {
			index(){
				var that = this
				uni.request({
				    url: that.baseUrl+'index/jrgl/agency_find', // 请求地址
				    method: 'GET',
					success: (res) => {
				        that.total_amount = res.data.total_amount
						that.list = res.data.list
				    }
				});
			},
			toggleShowAll() {
				this.showAll = !this.showAll;
			},
			chakan(item){
				this.find = item
				this.showCustomPopup = true
			},
			kefu() {
			    
			    const url = 'https://work.weixin.qq.com/kfid/kfc876cc6ff6b54a964'; 
			    window.open(url, '_blank'); 
			},
		}
	}
</script>

<style>
.top{
	width: 90%;background-color: #fff;margin-left: 5%;height: 200rpx; border-radius: 10rpx; margin-top: 35rpx; margin-bottom: 35rpx;
}
.top_text{
	width: 100%; text-align: center;
}
.top_title{
	font-size: 34rpx; padding-top: 30rpx;
}
.top_amount{
	font-size: 56rpx; padding-top: 30rpx; color: #3679ff; font-weight: bold;
}
.top_left{
	width: 20%; text-align: center; line-height: 120rpx;
}
.top_center{
	width: 57%;line-height: 55rpx;
}
.top_right{
	width: 23%;line-height: 120rpx;color: #3679ff;
}
.hidden {
    display: none !important;
}
.zhezhao{
	width: 100%;height: 100%;background-color: #000; opacity: 0.5;position: fixed; top: 0%;left: 0%; z-index: 8;
}
.custom-popup{
	width: 90%;height: auto;position: fixed;left: 5%;top: 25%; background-color: #fff; border-radius: 10rpx; z-index: 9;
}
.btn{
	background-color: #266fe8; text-align: center; color: #fff; border-radius: 10rpx; width: 80%;margin-left: 10%;height: 80rpx; line-height: 80rpx; margin-bottom: 30rpx;
}
 ::v-deep uni-image{
	 display:block !important;
 }
</style>
